<div id="app" class="container-fluid">

  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4 col-sm-12">
      <div class="card mt-4 border-0">
        <img src="/static/img/login-pic.jpg" class="card-img-top d-block d-lg-none" alt="">
        <div class="card-body">
          <form>
            <div class="form-group">
              <p class="h5 text-center">登录 / SIGN IN</p>
              <input type="hidden" id="f" name="f" value="" />
            </div>
            <div class="form-group">
              <label for="user_login">帐号</label>
              <input type="text" v-model="usercode" class="form-control" placeholder="帐号">
            </div>
            <div class="form-group">
              <label for="user_password">密码</label>
              <input type="password" v-model="userpass" class="form-control" placeholder="密码">
            </div>
            <div class="form-group">
              <label for="user_password">验证码</label>
              <img @click="reloadCaptcha" id="captcha_img" style="width: 100%; height:50px" :src="captchaURL"
                title="看不清，点击验证码可变更" />
              <input @keydown.enter="dologin" autocomplete="off" type="text" v-model="usercapt" class="form-control"
                id="user_captcha" placeholder="验证码">
            </div>
            <div class="form-group text-center py-4">
              <button type="button" @click="dologin" class="btn btn-primary mr-2">立即登录</button>
              <a href="/login/register" class="btn btn-secondary ml-2">没有账号，现在 -> 注册</a>
              <p class="mt-4" style="font-size: 0.9rem;">
                <a href="/" target="_self">游客访问，返回首页</a>
              </p>
              <p class="mt-4" style="font-size: 0.9rem;">
                <a href="{{.DDURL}}">钉钉扫码登录</a>
              </p>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="col-md-4"></div>
  </div>
</div>


<script>
  var g_path = '[[.CaptchaPath]]';
  var g_id = '[[.CaptchaId]]'

  Vue.createApp({
    data() {
      return {
        message: 'Hello Vue!',
        captchaURL: "",
        usercode: "",
        userpass: "",
        usercapt: "",
      }
    },
    mounted() {
      this.captchaURL = g_path
    },
    methods: {
      dologin() {
        var usercode = this.usercode;
        var userpass = this.userpass;
        var usercapt = this.usercapt;

        if (usercode.length == 0) {
          alert('请输入帐号');
          return;
        }
        if (userpass.length == 0) {
          alert('请输入密码');
          return;
        }
        if (usercapt.length == 0) {
          alert('请输入验证码');
          return;
        }

        axios.post('/pub/login', {
          usercode: usercode,
          userpass: userpass,
          usercapt: usercapt,
          captcha_id: g_id,
        })
          .then((response) => {
            console.log(response);
            const json = response.data;
            if (json.flag) {
              window.location.replace("[[.FromUri ]]");
            } else {
              if (json.capt) {
                g_path = json.capt.path;
                g_id = json.capt.id;
                this.captchaURL = g_path;
              }
              alert(json.msg);
            }
          })
          .catch(function (error) {
            console.log(error);
          });

      },
      reloadCaptcha() {
        this.captchaURL = g_path + '?t=' + new Date().getTime()
      }
    }
  }).mount('#app')
</script>